<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>EduCenter</title>
<!-- Plugins CSS -->
<link href="${pageContext.request.contextPath}/dist/css/plugins.css" rel="stylesheet" >
<!-- Custom CSS -->
<link href="${pageContext.request.contextPath}/dist/css/style.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="${pageContext.request.contextPath}/dist/images/favicon.ico">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
  $(function () {
	//显示鼓励鸡汤
		$.post("${pageContext.request.contextPath}/EduControllerByLu",{op:"getGoodWord"},function(data){
			$("#getgoodwords").text(data);
		},"json")
	  //失去焦点事件
	  //用户名输入
	  $("#userAccount").blur(function(){
		  if($("#userAccount").val().trim()==""){
			$("#userAccountId").html("用户名不能为空");
		  }else{
			$.post("${pageContext.request.contextPath}/UsersController",{uname:$("#userAccount").val(),op:"checkName"},function(data){
				$("#userAccountId").html(data);
			})
		  }
	  });
	  //密码
	  $("#userPwd").blur(function(){
		  if($("#userPwd").val().trim().length>=6 && $("#userPwd").val().trim().indexOf(" ")==-1){
			  $("#userPwdId").html("格式正确");
		  }else{
			  $("#userPwdId").html("密码格式不正确");
		  }
	  });
	  //确认密码
	  $("#userRePwd").blur(function(){
		  var upwd=$("#userPwd").val();
		  var urepwd=$("#userRePwd").val();
		  if(upwd==urepwd){
			  $("#userRePwdId").html("密码一致");
		  }else{
			  $("#userRePwdId").html("密码不一致");
		  }
	  });
	  //手机号
	  $("#userPhone").blur(function(){
		  if($("#userPhone").val().trim().length>=11 && $("#userPhone").val().trim().indexOf(" ")==-1){
			  $("#userPhoneId").html("手机号格式正确");
		  }else{
			  $("#userPhoneId").html("手机号格式不正确");
		  }
	  });
	  /* //最终提交表单
	  $("#regForm").submit(function(){
		  if($("#userAccountId").html()=="用户名可用" && $("#userPwdId").html()=="格式正确" && $("#userRePwdId").html()=="密码一致" && $("#userPhoneId").html()=="手机号格式正确"){
			  return true;
		  }
		  return false;
	  }) */
  })
  </script>
</head>

<body>
<!-- Pre Loader -->
<div id="dvLoading"></div>
<!-- Header Area -->
<header class="header" > 
  <!-- Topbar -->
  <div class="topbar">
    <div class="container">
      <div class="row">
        <div class="col-lg-6 col-md-7 col-12"  style="margin-left:600px;"> 
          <!-- Top Contact -->
          <ul class="top-contact">
            <li><i class="fa fa-phone"></i>+010 1234 56789</li>
            <li><i class="fa fa-envelope"></i><a href="mailto:support@yourmail.com">support@yourmail.com</a></li>
          </ul>
          <!-- End Top Contact --> 
        </div>
      </div>
    </div>
  </div>
  <!-- End Topbar --> 
  <!-- Header Inner -->
  <div class="header-inner">
    <div class="container">
      <div class="inner">
        <div class="row">
          <div class="col-lg-2 col-md-3 col-12"> 
            <!-- Start Logo -->
            <div class="logo"> <a href="index.html"><img src="${pageContext.request.contextPath}/dist/images/logo.png" alt=""></a> </div>
            <!-- End Logo --> 
            <!-- Mobile Nav -->
            <div class="mobile-nav"></div>
            <!-- End Mobile Nav --> 
          </div>
          <div class="col-lg-7 col-md-9 col-12"> 
            <!-- Main Menu -->
            <div class="main-menu" style="margin-left:120px">
								<nav class="navigation">
									<ul class="nav menu">
										<li><a href="index.jsp">首页</a></li>
										<li><a href="privacy-policy.jsp">隐私政策</a></li>
										<li><a href="aritcle-list.jsp">文章列表</a></li>
										<li><a href="contact.jsp">发布文章</a></li>
										<!-- <li><a href="404.jsp">跳转错误</a></li> -->
									</ul>
								</nav>
							</div>
            <!--/ End Main Menu --> 
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--/ End Header Inner --> 
</header>
<!-- End Header Area --> 
<!-- Breadcrumbs -->
<div class="breadcrumbs overlay">
  <div class="container">
    <div class="bread-inner">
      <div class="row">
        <div class="col-12">
          <h2 id="getgoodwords"></h2>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End Breadcrumbs --> 
<!-- Start Feature section Area -->
<div class="inner-content-wrapper log-in">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-xl-6 col-lg-6 col-md-12">
          <div class="login_tab_top_wrap float_left">
            <div class="btn_log"> <a href="#">注册</a> </div>
            <form  id="contact-form" action="${pageContext.request.contextPath }/UsersController?op=register"
				method="post" id="regForm" enctype="multipart/form-data">
	            <div class="login_wrapper float_left">
	              <div class="formsix-pos">
	                <div class="form-group i-email">
	                  <input type="text" class="form-control" id="userAccount" name="userAccount" required placeholder="用户名...*">
	                  <label id="userAccountId"></label>
	                </div>
	              </div>
	              <div class="form-group">
	                <div class="form-group i-password">
	                  <input type="file" class="form-control" id="userImg" name="userImg" placeholder="头像...*">
	                  <label></label>
	                </div>
	              </div>
	              <div class="form-group">
	                <div class="form-group i-password">
	                  <input type="password" class="form-control" required id="userPwd" name="userPwd" placeholder="密码...*">
	                  <label id="userPwdId"></label>
	                </div>
	              </div>
	              <div class="form-group">
	                <div class="form-group i-password">
	                  <input type="password" class="form-control" required id="userRePwd" name="userRePwd" placeholder="确认密码...*">
	                  <label id="userRePwdId"></label>
	                </div>
	              </div>
	              <div class="form-group">
	                <div class="form-group i-password">
	                  <input type="email" class="form-control" required id="userMail" name="userMail" placeholder="邮箱...">
	                  <label></label>
	                </div>
	              </div>
	              <div class="form-group">
	                <div class="form-group i-password">
	                  <input type="text" class="form-control" required id="userPhone" name="userPhone" placeholder="手机号码...">
	                  <label id="userPhoneId"></label>
	                </div>
	              </div>
	              <div class="form-group">
	                <input type="text" class="form-control" id="userRealName" name="userRealName" value="" placeholder="真实姓名...">
	                <label></label>
	              </div>
	              <div class="login_remember_box">
	                <label class="control control--checkbox">我同意平台协议
	                  <input type="checkbox">
	                  <span class="control__indicator"></span> </label>
	              </div>
	              <div class="header_btn inner_btn login_btn log float_left mb-0">
	              	<button type="submit" name="btn" id="btn" class="btn btn-inverse">注册</button>
	              </div>
	            </div>
            </form>
          </div>
      </div>
    </div>
  </div>
</div>
<!-- End Feature section Area --> 
<!-- Start Counter Sec Area -->
<div class="counter-sec-main">
  <div class="container">
    <div class="row">
      <div class="col-md-3 col-sm-6 col-xs-6">
        <div class="counter-sec text-center">
          <div class="animated-bg"><i></i><i></i><i></i> </div>
          <i class="count-icon icon-profile-male"></i> <span class="count-nos" id="target">25890</span>
          <p class="count-lable">Students</p>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-6">
        <div class="counter-sec text-center">
          <div class="animated-bg"><i></i><i></i><i></i> </div>
          <i class="count-icon icon-strategy"></i> <span class="count-nos" id="target2">1560</span>
          <p class="count-lable">Instructor</p>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-6">
        <div class="counter-sec text-center">
          <div class="animated-bg"><i></i><i></i><i></i> </div>
          <i class="count-icon icon-puzzle"></i> <span class="count-nos" id="target3">21350</span>
          <p class="count-lable">Courses</p>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-6">
        <div class="counter-sec text-center">
          <div class="animated-bg"><i></i><i></i><i></i> </div>
          <i class="count-icon icon-trophy"></i> <span class="count-nos" id="target4">128560</span>
          <p class="count-lable">Earnings</p>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End Counter Sec Area --> 
<!-- footer -->
<footer class="bg-black">
  <div class="container p-footer">
    <div class="row justify-content-between">
      <!-- footer content -->
      <div class="col-lg-5 mb-5 mb-lg-0">
        <!-- logo -->
        <a class="mb-4 f-logo d-inline-block" href="index.jsp"><img src="${pageContext.request.contextPath}/dist/images/footer-logo.png" alt=""></a>
        <p class="text-light">中国专业IT社区，致力于为中国软件开发者提供知识传播、在线学习、职业发展等全生命周期服务。
        						为AI爱好者提供一站式从入门到熟练运用到工作中的学习平台 
								提供拟真实验环境，让学员学习后直接具备在公司真实线上环境完成分配的工作内容能力  
								全面提升学员基础能力+编码能力+实战能力，一次补齐后续工作中所有短板。
		</p>
      </div>
      <div class="col-lg-6">
        <div class="row">
          <div class="col-6">
            <h4 class="text-white mb-4">友情链接</h4>
            <ul class="list-styled">
              <li class="mb-lg-3 mb-2 text-light"><!-- <a class="text-light d-block" href="index.jsp"></a> --></li>
              <li class="mb-lg-3 mb-2 text-light"><!-- <a class="text-light d-block" href="about.jsp"></a> --></li>
              <li class="mb-lg-3 mb-2 text-light"><!-- <a class="text-light d-block" href="blog.jsp"></a> --></li>
              <li class="mb-lg-3 mb-2 text-light"><!-- <a class="text-light d-block" href="team.jsp"></a> --></li>
              <li class="mb-lg-3 mb-2 text-light"><!-- <a class="text-light d-block" href="contact.jsp"></a> --></li>
            </ul>
          </div>
          <div class="col-6">
            <h4 class="text-white mb-4">诚招合作商</h4>
            <ul class="list-unstyled">
              <li class="text-light mb-3"></li>
              <li class="text-light mb-3"></li>
              <li class="text-light mb-3"></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- copyright -->
  <div class="container copyright-c">
    <div class="row">
      <div class="col-lg-6 col-md-12 text-center text-center text-lg-left mb-3 mb-md-0">
        <p class="mb-0 text-white">Copyright &copy; 2020.Company name All rights reserved.
      </div>
    </div>
  </div>
</footer>
<!-- footer --> 
<!--jquery js --> 
<script src="${pageContext.request.contextPath}/dist/js/jquery-min.js"></script> 
<!-- Popper Min JS --> 
<script src="${pageContext.request.contextPath}/dist/js/popper.min.js"></script> 
<!--jquery js --> 
<script src="${pageContext.request.contextPath}/dist/js/bootstrap.min.js"></script> 
<!--jquery js --> 
<script src="${pageContext.request.contextPath}/dist/js/plugins.js"></script> 
<!--Fontawesome js --> 
<script src="${pageContext.request.contextPath}/dist/js/fontawesome.js"></script> 
<!-- Owl Carousel js --> 
<script src="${pageContext.request.contextPath}/dist/js/swiper-slider.js"></script> 
<!-- Fancybox js --> 
<script src="${pageContext.request.contextPath}/dist/js/fancybox.js"></script> 
<!--owl.carousel js --> 
<script src="${pageContext.request.contextPath}/dist/js/jquery.animateNumber.min.js"></script> 
<!-- MagnificPopup JS --> 
<script src="${pageContext.request.contextPath}/dist/js/jquery.magnific-popup.min.js"></script> 
<!-- Slicknav js --> 
<script src="${pageContext.request.contextPath}/dist/js/slicknav.min.js"></script> 
<!--jquery js --> 
<script src="${pageContext.request.contextPath}/dist/js/custom.js"></script>
</body>
</html>
